<template>
	<view>
		<cu-custom  bgColor="bg-black-two"  :isBack="false">
			<block slot="content">登录</block>
		</cu-custom>
		<view class="flex-wrap margin-sm">
			<!-- 账号 -->
			<view class="flex-sub flex padding-sm" style="border-bottom: solid 1px #464646;">
				<view class="flex-twice">
					<input class="uni-input" name="userAccount" placeholder="请输入账号" v-model="username" @input="clearInput" />					
				</view>
				<view class="flex-sub text-right">
					<text  v-if="showClearIcon" @click="clearIcon" class="cuIcon-roundclosefill" style="color: #808080;font-size: 18px;"></text>
				</view>
			</view>
			<!-- 密码 -->
			<view class="flex-sub flex padding-sm" style="border-bottom: solid 1px #464646;">
				<view class="flex-twice">
					<input class="uni-input" name="userPwd" placeholder="请输入密码" v-model="password" :password="showPassword"/>
				</view>
				<view class="flex-sub text-right">
					<text :class="[!showPassword ? 'cuIcon-attentionfill' : 'cuIcon-attention']" @click="changePassword"  style="color: #808080;font-size: 18px;"></text>
				</view>
			</view>

			<view class="padding-top-lg flex flex-direction" @click="logins()">
				<button class="cu-btn round bg-green-two" >登录</button>
			</view>
		
		</view>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				username: '',
				showClearIcon: false,
				password: '',
				showPassword:false,
				chosen:'',
				userPhone:'',//获取微信小程序当前授权的手机号
			};
		},
		onLoad() {
			_self = this;
		},
		methods: {
			logins() {
				if (this.username && this.password) {
					return this.User.login({
						url:"user/login",
						data:{
							username:this.username,
							password:this.password
						}
					})
				} else {
					uni.showToast({
						title: '请输入用户名与密码',
						duration: 2000,
						icon: "none"
					})
				}
			},
			//带清除按钮的输入框
			clearInput: function(event) {
				console.log(!this.username);
			    if (this.username) {
			        this.showClearIcon = true;
			    } else {
			        this.showClearIcon = false;
			    }
			},
			clearIcon: function() {
			    this.username = '';
			    this.showClearIcon = false;
			},
			//可查看密码的输入框
			changePassword: function() {
				console.log(this.showPassword);
			    this.showPassword = !this.showPassword;
			},
			
			test(){
				uni.login({
				  provider: 'weixin',
				  success: function (loginRes) {
					let js_code=loginRes.code;//js_code可以给后台获取unionID或openID作为用户标识
					// 获取用户信息
					uni.getUserInfo({
					  provider: 'weixin',
					  success: function (infoRes) {
						//infoRes里面有用户信息需要的话可以取一下
						console.log();
					},
					  fail:function(res){}
					})
				  },
				  fail:function(res){}
				})
			},
			getUserInfo() {
							var that = this;
							uni.showLoading({ // 展示加载框
								title: '加载中',
							});
							uni.getUserProfile({ //获取到用户信息
								desc: '登录后可同步数据',
								success: async (obj) => {
									console.log('obj', obj);
									that.nickName = obj.userInfo.nickName //用户名
									that.avatarUrl = obj.userInfo.avatarUrl //用户头像
			
									// 调用 action ，请求登录接口
									uni.login({
										provider: 'weixin',
										success: (res) => {
											console.log('res-login', res);
											//获取到code
											that.code = res.code;
											// console.log('code', res.code);
			
											//请求登录接口
											if (res.errMsg == 'login:ok') {
												var params = {
													code: that.code,
													nickname: that.nickName,
													avatar: that.avatarUrl
												}
												
												console.log(params);
												
												/* that.$api.appPlateForm('POST', 'auth/login', params, function(
													res) {
			
													if (res.code == 200) {
														uni.showToast({
															title: '登录成功',
															icon: 'success',
															mask: true,
														});
														//获取到token 存入缓存。通过有无token来判断是否登录
			
														// console.log('登录接口',res)
														uni.setStorageSync('localtoken', res.data.data.access_token)
														that.myProfile()  //用户信息接口
														that.getHistoryList()   //足迹接口
			
													}
												}, function(err) {
													uni.showToast({
														icon: 'none',
														title: err.msg
													})
												}); */
			
											}
										},
									});
								},
								fail: () => {
									uni.showToast({
										title: '授权已取消',
										icon: 'error',
										mask: true,
									});
								},
								complete: () => {
									// 隐藏loading
									uni.hideLoading();
								},
							});
						},
						
		}
	}
</script>

<style>
	/* 时间选择 */
	.cu-form-group uni-picker .picker{
		text-align: unset;
	}
	.padding-top-lg{
		padding-top: 15%;
	}
</style>
